<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>边框属性</title>
		<style>
			div{
				/* CSS3属性：边框border属性
				 1.边框border属性【复合属性】
				  border: 边框宽度 边框的样式 边框颜色；
				  主属性：子属性【提升为主属性】
				  边框宽度属性：border-width
				  */
				  border: 1px solid red; /*1个像素红色实线边框*/
				  border-width: 10px;/*边框宽度调整为10px*/
				  /* div配上宽高 */
				  width: 200px;
				  height: 200px;
				  border-style: double;/* 边框样式调整 :点 虚双实线*/
				  border-color: green;
				  /* 边框左右上下设置：宽度 样式 颜色 */
				  border-left-width: 20px;
				  border-bottom-width: 30px;
				  border-top-style: dotted;/* 设置上边框样式为点线 */
				  border-left-style: dashed;
				  border-right-color: yellow;/* 设置右侧边框颜色 */
				  /* 设置红色实线的10个像素边框*/
				  border: 10px solid red;
				  /* 边框倒角 border-radius属性: 宽高倒角值一致：画圆;*/
				  border-radius: 200px;
				  /* 简写属性值：四个方向：顺时针 左上 右上 右下左下*/
				  border-radius: 0 200px;
				  /* 简写属性值：四个方向：顺时针 左上+右下 右上+左下*/
				  border-radius: 0 100px 200px;
				  /* 简写属性值：四个方向：顺时针 左上 右上 右下左下*/
				  border-radius: 10px 80px 120px 200px;
				  /* 简写属性值：四个方向：顺时针 左上+右下 右上+左下*/
			}
		</style>
	</head>
	<body>
		<!-- 分区元素：页面上的区域，特点：有宽没高-->
		<div></div>
		
	</body>
</html>